<template>
  <div>
    <a-card :bordered="false">
      <a-tabs
        v-model="activeKey"
        type="card">
        <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" >
          <div v-if="pane.key==1">
            <a-button type="primary" @click="addMoneyIncomeMonth" :disabled="addMoneyIncomeMonthBool">添加月收入信息</a-button>
            <a-collapse defaultActiveKey="a"  :bordered="false">
              <a-collapse-panel :header="'月度收入信息表 '+(index+1)"  :key="index" v-for="(item,index) in moneyIncomeListMonthData">
                 <a-row class="info-row">
                   <a-col :span="8" class="text-rol"><span class="text-label">收入记录id：</span><span class="text-value">{{item.id}}</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">项目编号：</span><span class="text-value">{{item.objNum}}</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">收入分析关键字：</span><span class="text-value">{{item.incomeinfo}}</span></a-col>
                   <a-col :span="24" class="text-rol"><span class="text-label">项目名称：</span><span class="text-value">{{item.objName}}</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">现开发方式：</span><span class="text-value">{{item.exploitWay}}</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">现开发方式年收入：</span><span class="text-value">{{item.exploitNowYearMoney}} 亿元</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">现开发方式年毛利：</span><span class="text-value">{{item.exploitNowYearProfit}} 亿元</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">收入年月：</span><span class="text-value">{{item.incomeDate}}</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">当月收入：</span><span class="text-value">{{item.monthMoney}} 亿元</span></a-col>
                   <a-col :span="8" class="text-rol"><span class="text-label">当月毛利：</span><span class="text-value">{{item.monthProfit}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">至本月累计收入：</span><span class="text-value">{{item.endNowMonthAllMoney}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">至本月累计毛利：</span><span class="text-value">{{item.endNowMonthAllProfit}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">本年累计收入：</span><span class="text-value">{{item.endNowYearAllMoney}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">本年累计毛利：</span><span class="text-value">{{item.endNowYearAllProfit}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">合同收入比例：</span><span class="text-value">{{item.heTongBl}}</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">至本月累计欠（超）收：</span><span class="text-value">{{item.backMonthMoney}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">本年累计欠（超）：</span><span class="text-value">{{item.backYearMoney}} 亿元</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">欠（超）收原因：</span><span class="text-value">{{item.reasonBack}}</span></a-col>
                   <a-col :span="24" class="text-rol"><span class="text-label">收入报告：</span><span class="text-value">{{item.backFileUrl}}</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">建档日期：</span><span class="text-value">{{item.createDate}}</span></a-col>
                   <a-col :span="12" class="text-rol"><span class="text-label">建档人员：</span><span class="text-value">{{item.createPeople}}</span></a-col>
                   <a-col :span="24" class="text-rol"><span class="text-label">备注：</span><span class="text-value">{{item.desc}}</span></a-col>
                 </a-row>
              </a-collapse-panel>
              <!--表单填写-->
              <a-collapse-panel header="新增收入信息" key="a" v-if="addMoneyIncomeMonthBool">
                <a-form ref="moneyIncomeMonthForm" class="form"  :form="moneyIncomeMonthForm">
                  <a-row>
                    <a-col :span="12">
                      <a-form-item label="项目编号" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="项目编号"
                          disabled="disabled"
                          v-model="addMoneyIncomeMonthJson.objNum"
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :span="12">
                      <a-form-item label="收入分析关键字" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="收入分析关键字"
                          v-model="addMoneyIncomeMonthJson.incomeinfo"
                          v-decorator="['addMoneyIncomeMonthJson.incomeinfo',
                                {rules: [{ required: true, message: '请输入项目名称', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="项目名称" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="项目名称"
                          v-model="addMoneyIncomeMonthJson.objName"
                          disabled="disabled"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="现开发方式" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="现开发方式"
                          v-model="addMoneyIncomeMonthJson.exploitWay"
                          v-decorator="['addMoneyIncomeMonthJson.exploitWay',
                                {rules: [{ required: true, message: '请输入现开发方式', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="现开发方式年收入" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">

                        <a-input-number class="input-num-width" placeholder="现开发方式年收入"  v-model="addMoneyIncomeMonthJson.exploitNowYearMoney"

                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="现开发方式年毛利" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">

                        <a-input-number class="input-num-width"  placeholder="现开发方式年毛利"  v-model="addMoneyIncomeMonthJson.exploitNowYearProfit" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="收入年月" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
                        <a-month-picker
                          class="input-num-width"
                          placeholder="收入年月"
                          @change="dataChangeValidBegintimeMonth"

                        />

                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="当月收入" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">

                        <a-input-number class="input-num-width" placeholder="当月收入"  v-model="addMoneyIncomeMonthJson.monthMoney" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="当月毛利" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">

                        <a-input-number class="input-num-width" placeholder="当月毛利" v-model="addMoneyIncomeMonthJson.monthProfit" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="至本月累计收入" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="至本月累计收入" v-model="addMoneyIncomeMonthJson.endNowMonthAllMoney" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="至本月累计毛利" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="至本月累计毛利" v-model="addMoneyIncomeMonthJson.endNowMonthAllProfit" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="本年累计收入" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="本年累计收入" v-model="addMoneyIncomeMonthJson.endNowYearAllMoney" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="本年累计毛利" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="本年累计毛利" v-model="addMoneyIncomeMonthJson.endNowYearAllProfit" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="合同收入比例" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="合同收入比例"
                          v-model="addMoneyIncomeMonthJson.heTongBl"
                          v-decorator="['addMoneyIncomeMonthJson.heTongBl',
                                {rules: [{ required: true, message: '请输入合同收入比例', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="至本月累计欠（超）收" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="至本月累计欠（超）收"
                                        v-model="addMoneyIncomeMonthJson.backMonthMoney"

                        />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="本年累计欠（超）收" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">

                        <a-input-number class="input-num-width" placeholder="本年累计欠（超）收" v-model="addMoneyIncomeMonthJson.backYearMoney" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="欠（超）收原因" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="欠（超）收原因"
                          v-model="addMoneyIncomeMonthJson.reasonBack"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="收入报告" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
                        <!--:beforeUpload="beforeUpload" @change="handleChange"-->
                        <a-upload-dragger name="file"  :action="handleFileUpdata" :multiple="false"  @change="handleChange">
                          <p class="ant-upload-drag-icon">
                            <a-icon type="inbox" />
                          </p>
                          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
                          <p class="ant-upload-hint">支持扩展名：.rar .zip .doc .docx .pdf .jpg ...</p>
                        </a-upload-dragger>



                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="建档日期" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-date-picker
                          format="YYYY-MM-DD"
                          style="width: 100%"
                          :disabledDate="disabledDate"
                          placeholder="建档日期"
                          @change="dataChangeValidBegintime"
                          :showToday="false"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="建档人员" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="请输入建档人员"
                          v-model="addMoneyIncomeMonthJson.createPeople"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="备注" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
                        <a-textarea
                          placeholder="请输入备注"
                          maxlength="350"
                          v-model="addMoneyIncomeMonthJson.desc"
                          autocomplete="off"
                          :autosize="{ minRows: 4, maxRows: 7 }"/>
                      </a-form-item>
                      <a-form-item   class="text-align-center">
                        <a-button  class="margin-right-20" @click="addMoneyIncomeMonthJsonCancel" >取消</a-button>
                        <a-button  type="primary" @click="saveMoneyIncomeMonthJson">保存</a-button>
                      </a-form-item>

                    </a-col>
                  </a-row>


                </a-form>
              </a-collapse-panel>
            </a-collapse>
          </div>


          <!--分业太收入-->
          <div v-if="pane.key==2">
            <a-button type="primary" @click="addMoneyIncome" :disabled="addMoneyIncomeBool">添加信息</a-button>
            <a-collapse defaultActiveKey="a" :bordered="false">
              <a-collapse-panel :header="'项目开发分类业态收入信息表 '+(index+1)" :key="index" v-for="(item,index) in moneyIncomeListData">
                <a-row class="info-row">
                  <a-col :span="8" class="text-rol"><span class="text-label">收入记录id：</span><span class="text-value">{{item.id}}</span></a-col>
                  <a-col :span="8" class="text-rol"><span class="text-label">项目编号：</span><span class="text-value">{{item.objNum}}</span></a-col>
                  <a-col :span="8" class="text-rol"><span class="text-label">收入分析关键字：</span><span class="text-value">{{item.incomeinfo}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">项目名称：</span><span class="text-value">{{item.objName}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">开发方式名称：</span><span class="text-value">{{item.exploitWay}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">开发业态：</span><span class="text-value">{{item.exploitYeTai}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">现开发方式年收入：</span><span class="text-value">{{item.exploitNowYearMoney}}</span></a-col>
                  <a-col :span="8" class="text-rol"><span class="text-label">收入年月：</span><span class="text-value">{{item.incomeDate}}</span></a-col>
                  <a-col :span="8" class="text-rol"><span class="text-label">当月收入：</span><span class="text-value">{{item.monthMoney}} 亿元</span></a-col>
                  <a-col :span="8" class="text-rol"><span class="text-label">当月毛利：</span><span class="text-value">{{item.monthProfit}} 亿元</span></a-col>

                  <a-col :span="12" class="text-rol"><span class="text-label">影响收入因素：</span><span class="text-value">{{item.factor}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">提升收入措施：</span><span class="text-value">{{item.upIncomeMethod}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">建档日期：</span><span class="text-value">{{item.createDate}}</span></a-col>
                  <a-col :span="12" class="text-rol"><span class="text-label">建档人员：</span><span class="text-value">{{item.createPeople}}</span></a-col>
                  <a-col :span="24" class="text-rol"><span class="text-label">备注：</span><span class="text-value">{{item.desc}}</span></a-col>

                </a-row>
              </a-collapse-panel>
              <!--表单填写-->
              <a-collapse-panel header="新增信息" key="a" v-if="addMoneyIncomeBool">
                <a-form ref="moneyIncomeForm" class="form"  :form="moneyIncomeForm">
                  <a-row>
                    <a-col :span="12">
                      <a-form-item label="项目编号" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="项目编号"
                          disabled="disabled"
                          v-model="addMoneyIncomeJson.objNum"
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :span="12">
                      <a-form-item label="收入分析关键字" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="关键字"
                          v-model="addMoneyIncomeJson.incomeinfo"
                          v-decorator="['addMoneyIncomeJson.incomeinfo',
                                {rules: [{ required: true, message: '请输入关键字', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="项目名称" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="项目名称"
                          v-model="addMoneyIncomeJson.objName"
                          disabled="disabled"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="开发方式名称" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="开发方式名称"
                          v-model="addMoneyIncomeJson.exploitWay"
                          v-decorator="['addMoneyIncomeJson.exploitWay',
                                {rules: [{ required: true, message: '请输入开发方式名称', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="开发业态" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="开发业态"
                          v-model="addMoneyIncomeJson.exploitYeTai"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="现开发方式年收入" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input-number class="input-num-width" placeholder="现开发方式年收入"  v-model="addMoneyIncomeJson.exploitNowYearMoney" />

                      </a-form-item>
                    </a-col>


                    <a-col :span="8">
                      <a-form-item label="收入年月" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
                        <a-month-picker
                          class="input-num-width"
                          placeholder="收入年月"
                          @change="dataChangeValidBegintimeYeTaiMonth"

                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="当月收入" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
                        <a-input-number class="input-num-width" placeholder="当月收入"  v-model="addMoneyIncomeJson.monthMoney" />

                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="当月毛利" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">
                        <a-input-number class="input-num-width" placeholder="当月毛利"  v-model="addMoneyIncomeJson.monthProfit" />

                      </a-form-item>
                    </a-col>


                    <a-col :span="12">
                      <a-form-item label="影响收入因素" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="影响收入因素"
                          v-model="addMoneyIncomeJson.factor"
                          v-decorator="['addMoneyIncomeJson.factor',
                                {rules: [{ required: true, message: '请输入影响收入因素', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="提升收入措施" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="提升收入措施"
                          v-model="addMoneyIncomeJson.upIncomeMethod"
                          v-decorator="['addMoneyIncomeJson.upIncomeMethod',
                                {rules: [{ required: true, message: '请输入提升收入措施', whitespace: true}]}]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="建档日期" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-date-picker
                          format="YYYY-MM-DD"
                          style="width: 100%"
                          :disabledDate="disabledDate"
                          placeholder="建档日期"
                          @change="dataChangeValidBegintimeYeTai"
                          :showToday="false"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="建档人员" :labelCol=" { span: 6 }" :wrapperCol=" { span: 16 }">
                        <a-input
                          maxlength="50"
                          autocomplete="off"
                          placeholder="建档人员"
                          v-model="addMoneyIncomeJson.createPeople"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="备注" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
                        <a-textarea
                          placeholder="请输入内容"
                          maxlength="350"
                          v-model="addMoneyIncomeJson.desc"
                          autocomplete="off"
                          :autosize="{ minRows: 4, maxRows: 7 }"/>
                      </a-form-item>
                      <a-form-item   class="text-align-center">
                        <a-button  class="margin-right-20" @click="addMoneyIncomeJsonCancel" >取消</a-button>
                        <a-button  type="primary" @click="saveMoneyIncomeJson">保存</a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>


                </a-form>
              </a-collapse-panel>
            </a-collapse>

          </div>
        </a-tab-pane>
      </a-tabs>



    </a-card>
    <!--         fixed footer toolbar -->

  </div>
</template>

<script>

  import FooterToolBar from '@/components/tools/FooterToolBar'
  import indexedDB from '@/db/db'
  import DetailList from '@/components/tools/DetailList'

  const DetailListItem = DetailList.Item

  import LandCert from '../lands/LandCert'
  import AddProjectLand from '../lands/AddProjectLand'
  import ProjectLandDetail from '../lands/ProjectLandDetail'
  import moment from "moment"
  import {getBase64} from '../../../utils/util'

  export default {
    name: "moneyIncome",
    components: {
      ProjectLandDetail,
      DetailList,
      DetailListItem,
      LandCert,
      AddProjectLand,
    },
    data() {
      const panes = [
        { title: '月度收入信息', key: '1'},
        { title: '分业态收入', key: '2'},
      ]
      return {
        p:[],
        projectJson:{},
        addMoneyIncomeBool:false,
        addMoneyIncomeMonthBool:false,
        activeKeyMonth:null,
        moneyIncomeMonthForm:this.$form.createForm(this),
        moneyIncomeForm:this.$form.createForm(this),
        addMoneyIncomeJson:{
          objNum:"", // 项目编号
          incomeinfo:"",      // 收入分析
          objName:"",     // 项目名称
          exploitWay:"",      // 开发方式
          exploitYeTai:"",// 开发业态
          exploitNowYearMoney:null,     // 现开发方式年收入
          incomeDate:"",          // 收入年月
          monthMoney:null,                   // 当月收入
          monthProfit:null,                  // 当月毛利

          factor:"",                          // 影响收入因素
          upIncomeMethod:"",     //  提升收入措施

          createDate:"",           // 建档日期
          createPeople:"",             // 建档人员
          desc:"",
        },
        addMoneyIncomeMonthJson:{
          objNum:"", // 项目编号
          objName:"",     // 项目名称
          incomeinfo:"",      // 收入分析
          exploitWay:"",      // 开发方式
          exploitNowYearMoney:null,     // 先开发方式年收入
          exploitNowYearProfit:null,      // 先开发方式毛利润
          incomeDate:"",          // 收入年月
          monthMoney:"",                   // 当月收入
          monthProfit:null,                  // 当月毛利
          endNowMonthAllMoney:null,       // 至本月累计收入
          endNowMonthAllProfit:null,       // 至本月累计毛利
          endNowYearAllMoney:null,       // 至本年累计收入
          endNowYearAllProfit:null,       // 至本年累计毛利
          heTongBl:"",                    // 合同收入比例
          backMonthMoney:null,              // 至本月累计欠（超）收
          backYearMoney:null,               // 本年来及欠（超）收
          reasonBack:"",           // 欠超收原因
          backFileUrl:"",                     // 收入报告
          createDate:"",           // 建档日期
          createPeople:"",             // 建档人员
          desc:"",                     // 备注
        },
        activeKey: panes[0].key,
        panes,
        moneyIncomeListData:[],
        moneyIncomeListMonthData:[],
        fileList:[],
        fileInfoList:[]
      }
    },
    mounted() {
        let id = this.$route.query.objId
        this.getProjectDetail(id)
      this.getInComeList();
      this.getInComeYeTaiList();
      // this.getfile(1);
    },
    methods: {
      getProjectDetail(id){
        indexedDB.get({name:'project'}, id).then(res=>{
          console.log(res)
          if(res.length!=0){
            this.projectJson = res[0]
            this.addMoneyIncomeMonthJson.objNum = this.projectJson.project_number;
            this.addMoneyIncomeMonthJson.objName = this.projectJson.name;
            this.addMoneyIncomeJson.objNum = this.projectJson.project_number;
            this.addMoneyIncomeJson.objName = this.projectJson.name;
          }

        })
      },
      disabledDate(current) {
        // Can not select days before today and today
        // return current && current < moment().endOf('day');
        let yd = new Date().getDate()+1;
        let y  = new Date().getFullYear();
        let m  = new Date().getMonth()+1;
        return current && current > new Date(y+"-"+m+"-"+yd);
      },
      moment,
      /*日期赋值*/

      dataChangeValidBegintime(data,pic){
        this.addMoneyIncomeMonthJson.createDate = pic;
      },
      dataChangeValidBegintimeMonth(data,pic){
        this.addMoneyIncomeMonthJson.incomeDate = pic;
      },

      /*月度收入信息*/
      getfile(id) {
        let that = this
        console.log(id)

        indexedDB.get({name:'files'},id).then(res => {
          console.log(res)
          that.fileInfoList.push(res);
        })
      },
      getInComeList() {
        let that = this
        indexedDB.handleDataByCursor('moneyIncome', '','').then(res => {
          console.log(res)
          if (res.length > 0) {
            that.moneyIncomeListMonthData = res;
            res.forEach((items,index)=>{
              let array = items.backFileUrl.split(",");
              array.forEach((item)=>{
                console.log(item)
                that.getfile(item);
              })
            })



          }
        })
      },
      beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png'|| file.type === 'image/jpg'|| file.type === 'image/pdf'
        if (!isJPG) {
          this.$message.error('上传格式不正确!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传大小不能大于2M!')
        }
        return isJPG && isLt2M
      },
      handleFileUpdata(file) {
        console.log(file)
        file.status = 'done'
        let obj = {
          name: file.name,
          file: file,
        }
        this.fileList.push(file);
        // indexedDB.fileInsert({name:'files'}, obj).then(res => {
        //   console.log(res)
        //   if(res){
        //
        //   }
        // })

      },
      handleChange(info) {
        console.log(info)
        // this.fileList = info.fileList;
       /* let obj = {
          name: info.file.name,
          file: info.file,
        }
        indexedDB.fileInsert({name:'files'}, obj).then(res => {
          console.log(res)
        })
        const status = info.file.status;
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }*/
      },
      beforeUploadTest(file){
        console.log(file)
        console.log(file.name)
        let _this = this;

        if (!file) {
          return;
        }
        var reader = new FileReader();
        reader.onload = function(e) {
          console.log(e)
          var contents = e.target.result;
          _this.displayContents(contents);
        };
        reader.readAsText(file);

      },
      displayContents(contents) {
        var element = document.getElementById('file-content');
        element.textContent = contents;
      },

      initMoneyIncomeMonthJson(){
        this.addMoneyIncomeMonthJson = {
          objNum:this.projectJson.project_number, // 项目编号
          objName:this.projectJson.name,     // 项目名称
          incomeinfo:"",      // 收入分析
          exploitWay:"",      // 开发方式
          exploitNowYearMoney:null,     // 先开发方式年收入
          exploitNowYearProfit:null,      // 先开发方式毛利润
          incomeDate:"",          // 收入年月
          monthMoney:"",                   // 当月收入
          monthProfit:null,                  // 当月毛利
          endNowMonthAllMoney:null,       // 至本月累计收入
          endNowMonthAllProfit:null,       // 至本月累计毛利
          endNowYearAllMoney:null,       // 至本年累计收入
          endNowYearAllProfit:null,       // 至本年累计毛利
          heTongBl:"",                    // 合同收入比例
          backMonthMoney:null,              // 至本月累计欠（超）收
          backYearMoney:null,               // 本年来及欠（超）收
          reasonBack:"",           // 欠超收原因
          backFileUrl:"",                     // 收入报告
          createDate:"",           // 建档日期
          createPeople:"",             // 建档人员
          desc:"",                     // 备注
        }
      },

      addMoneyIncomeMonth(){
        this.addMoneyIncomeMonthBool = true;
        this.initMoneyIncomeMonthJson();
      },

      addMoneyIncomeMonthJsonCancel(){
        this.addMoneyIncomeMonthBool = false;
        this.initMoneyIncomeMonthJson();
        this.moneyIncomeMonthForm.resetFields();
      },
      saveMoneyIncomeMonthJson(){
        let _this = this
        this.moneyIncomeMonthForm.validateFields((err, values) => {
          if (!err) {
            let imgArray = [];
            if(_this.fileList.length!=0){
              _this.fileList.forEach((item)=>{
                let obj = {
                  name: item.name,
                  file: item,
                }
                indexedDB.fileInsert({name:'files'}, obj).then(res => {
                  if(res){
                    imgArray.push(res);
                  }
                })
              })
            }

            setTimeout(function() {
              _this.addMoneyIncomeMonthJson.backFileUrl = imgArray.join(',');
              indexedDB.insert({name:"moneyIncome"},_this.addMoneyIncomeMonthJson).then(res => {
                if(res==true){
                  _this.$message.info("提交成功");
                  _this.addMoneyIncomeMonthJsonCancel();
                  _this.getInComeList();
                  // _this.addMoneyIncomeMonthJson.resetFields();
                }else{
                  this.$message.error("保存失败！");
                }
              });
            },1000)



          }else{
            _this.$message.error("请输入必填值");
          }
        })
      },






      /*end*/

      /*
      * 分业态收入
      * */
      getInComeYeTaiList() {
        let that = this
        indexedDB.handleDataByCursor('moneyIncomeYeTai', '','').then(res => {
          console.log(res)
          if (res.length > 0) {
            that.moneyIncomeListData = res

          }
        })
      },
      dataChangeValidBegintimeYeTai(data,pic){
        this.addMoneyIncomeJson.createDate = pic;
      },
      dataChangeValidBegintimeYeTaiMonth(data,pic){
        this.addMoneyIncomeJson.incomeDate = pic;
      },
      initMoneyIncomeJson(){

        this.addMoneyIncomeJson = {

          objNum:this.projectJson.project_number, // 项目编号
          objName:this.projectJson.name,     // 项目名称
          incomeinfo:"",      // 收入分析

          exploitWay:"",      // 开发方式
          exploitYeTai:"",// 开发业态
          exploitNowYearMoney:null,     // 现开发方式年收入
          incomeDate:"",          // 收入年月
          monthMoney:null,                   // 当月收入
          monthProfit:null,                  // 当月毛利

          factor:"",                          // 影响收入因素
          upIncomeMethod:"",     //  提升收入措施

          createDate:"",           // 建档日期
          createPeople:"",             // 建档人员
          desc:"",
        }
      },
      addMoneyIncome(){
        this.addMoneyIncomeBool = true;
        this.initMoneyIncomeJson();

      },

      addMoneyIncomeJsonCancel(){
        this.addMoneyIncomeBool = false;
        this.initMoneyIncomeJson();
        this.moneyIncomeForm.resetFields();
      },
      saveMoneyIncomeJson(){
        let _this = this
        this.moneyIncomeForm.validateFields((err, values) => {
          if (!err) {
            indexedDB.insert({name:"moneyIncomeYeTai"},_this.addMoneyIncomeJson).then(res => {
              if(res==true){
                _this.$message.info("提交成功");
                _this.addMoneyIncomeJsonCancel();
                _this.getInComeYeTaiList();
                // _this.addMoneyIncomeMonthJson.resetFields();
              }else{
                this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })
      },

      /*end*/
      changeCollapse(key){
        this.activeKeyMonth = [];
        this.activeKeyMonth.push(key[key.length-1]);

      },
      windeoOpenFile(url){
        window.open('file:///F:/%E4%B8%8A%E4%BC%A0%E5%8B%BF%E5%88%A0.png')
      },



    },
  }
</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 24px;
  }
  .title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin: 16px 0 30px 0;
  }
  .select-bar {
    padding: 20px 0;
  }
  .text-label{
    margin-right: 20px;
    color:#000000;
    font-weight: 700;
  }
  .text-value{
    color:#777777;
    font-weight: 700;
  }
  .text-rol{
    margin:10px 0;

  }
  .input-num-width{
    width: 100%;
  }
  .info-row{
    padding: 0 45px;
  }
</style>